<template>
  <!-- 底部播放bar -->
  <div class="playBar-container">
    <div class="playBar">
      <div class="playBar-content">
        <audio
          :src="audio.location"
          id="audioPlay"
          @canplay="canPlaySong"
          @timeupdate="updateTime"
          @ended="playNext"
        ></audio>
        <div class="songInfo">
          <div class="cover" @click="showDetail">
            <van-loading color="#1989fa" v-show="loading" />
            <van-image
              class="cover"
              fit="cover"
              width="42"
              height="42"
              :src="audio.albumPic"
              v-show="!loading"
            ></van-image>
          </div>
          <div class="info">
            <div class="songName">{{ audio.name }}</div>
            <div class="artist">{{ audio.singer }}</div>
          </div>
        </div>
        <div class="control">
          <i class="iconfont icon-bofangliebiao" @click="showList"></i>
          <van-icon
            :name="playing ? 'pause-circle-o' : 'play-circle-o'"
            @click="toggleStatus"
          />
          <i class="iconfont icon-49xiayishou" @click="playNext"></i>
        </div>
      </div>
      <!-- 歌曲进度条 -->
      <div class="progress">
        <div
          class="pro-load"
          :style="{
            '-webkit-transform': 'translateX(' + prBufferedTime + '%)'
          }"
        ></div>
        <div
          class="pro-play"
          :style="{ '-webkit-transform': 'translateX(' + prCurrentTime + '%)' }"
        ></div>
      </div>
    </div>
    <!-- 播放控件组件 -->

    <!-- 播放列表弹出层 -->
    <!-- <playList :isListOpen="listVisible" @close="listVisible = false"></playList> -->
    <van-popup
      v-model="isListOpen"
      position="bottom"
      :style="{ height: '30%' }"
      @close="isListOpen = false"
      closeable
    >
      <van-cell class="title">
        <div slot="title">播放列表（{{ songList.length }}）</div>
      </van-cell>
      <!-- 播放列表 -->
      <!-- <van-cell-group>
        <van-cell
          :title="item.name + '-' + item.singer"
          v-for="(item, index) in songList"
          :key="index"
          class="songList"
          :class="{ on: item.id === audio.id }"
        >
          <div slot="titile" class="on">
            <span>{{ item.name }}</span>
            <span>&nbsp;-{{ item.singer }}</span>
          </div>
          <van-icon slot="default" name="cross"></van-icon>
        </van-cell>
      </van-cell-group> -->
      <div class="songInfo">
        <div v-for="(item, index) in songList" :key="index" class="info">
          <div
            class="left"
            :class="{ on: item.id === audio.id }"
            @click="playAudio(item)"
          >
            <span>{{ item.name }}</span>
            <span>&nbsp;-{{ item.singer }}</span>
          </div>
          <van-icon name="cross"></van-icon>
        </div>
      </div>
    </van-popup>
    <!-- 播放列表弹出层 -->
  </div>
</template>

<script>
// import playList from '../components/playList'
import { mapGetters } from 'vuex'
export default {
  name: 'playBar',
  components: {
    // playList
  },
  props: {},
  data() {
    return {
      // listVisible: false
      isListOpen: false
    }
  },
  computed: {
    ...mapGetters([
      'audio',
      'change',
      'playing',
      'loading',
      'currentTime',
      'prBufferedTime',
      'tmpCurrentTime',
      'prCurrentTime',
      'songList',
      'UrlList',
      'currentIndex'
    ])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // ...mapMutations(['play', 'pause', 'playNext', 'setAuidoIndex']),
    toggleStatus() {
      if (this.playing) {
        document.getElementById('audioPlay').pause()
        this.$store.commit('pause')
      } else {
        document.getElementById('audioPlay').play()
        this.$store.commit('play')
      }
    },
    canPlaySong() {
      // console.log(this.audio)
      this.$store.commit('closeLoading')
      this.$store.commit('play')
      document.getElementById('audioPlay').play()
    },
    // 点击显示播放列表弹出层
    showList() {
      this.isListOpen = true
    },
    playAudio(song) {
      // this.$store.commit('setAuidoIndex', index)
      // this.$store.commit('setAudioLocation', index)
      if (song.id === this.audio.id) {
        this.$router.push({
          name: 'playerDetail',
          params: {
            id: song.id
          }
        })
        return false
      }
      document.getElementById('audioPlay').pause()
      this.$store.commit('pause')
      var audio1 = {}
      audio1.id = song.id
      audio1.singer = song.singer // 演唱者
      audio1.albumPic = song.albumPic
      audio1.name = song.name
      // 通过Vuex改变状态
      this.$store.commit('addToList', audio1)
      this.$store.dispatch('getSong', audio1.id)
    },
    // 监听音频播放位置发生变化的事件
    updateTime() {
      const myaudio = document.getElementById('audioPlay')
      // console.log(myaudio.currentTime)
      const time = parseInt(myaudio.currentTime)
      // console.log(time)
      if (this.change) {
        myaudio.currentTime = this.tmpCurrentTime
        this.$store.commit('setChange', false)
      } else {
        this.$store.commit('updateCurrentTime', time)
      }
      const vm = this
      myaudio.onsuspend = function() {
        // const timeRange = myaudio.buffered.end(0).toFixed(2)
        const timeRange = parseInt(myaudio.buffered.end(0))
        if (timeRange.length > 0 && myaudio.duration > 0) {
          vm.$store.commit('updateBufferedTime', timeRange)
        }
      }
      // this.$store.commit('updateDurationTime', myaudio.duration.toFixed(2))
      this.$store.commit('updateDurationTime', parseInt(myaudio.duration))
    },
    playNext() {
      if (this.currentIndex === this.songList.length) {
        if (this.songList.length === 1) {
          return false
        } else {
          const id = this.songList[0].id
          console.log(id)
          this.$store.commit('setCurrentIndex')
          this.$store.dispatch('getSong', id)
        }
        // return false
      } else {
        const id = this.songList[this.currentIndex].id
        if (!this.songList[this.currentIndex].url) {
          this.$store.commit('setNextAudioIndex')
          this.$store.dispatch('getSong', id)
        } else {
          this.$store.commit('playNextAudio')
        }
      }

      // this.$store.dispatch('getSong', id)
    },
    // 点击图片进入播放页面组件详情页
    showDetail() {
      this.$router.push({ name: 'playerDetail', params: { id: this.audio.id } })
      this.$store.commit('toggleDetail')
    }
  }
}
</script>
<style lang="less" scoped>
.playBar-container {
  width: 100%;
  position: fixed;
  height: 108px;
  bottom: 0;
  left: 0;
  z-index: 99;
  // background-color: blue;
  .palyBar {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .playBar-content {
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 6px;
    height: 108px;
    .songInfo {
      display: flex;
      align-items: center;
      .cover {
        display: flex;
        align-items: center;
      }
      .info {
        padding-left: 8px;
        .songName {
          width: 360px;
          font-size: 32px;
          color: #333;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .artist {
          font-size: 28px;
          color: #8a8a8a;
        }
      }
    }
    .control {
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #d14d4a;
      width: 254px;
      height: 80px;
      i.iconfont {
        font-size: 50px;
      }
      .van-icon {
        font-size: 60px;
      }
    }
  }
  .progress {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.5);
    // z-index: 10;
    .pro-load,
    .pro-play {
      width: 100%;
      height: 4px;
      position: absolute;
      left: -100%;
    }
    .pro-load {
      background-color: rgba(220, 217, 217, 0.4);
    }
    .pro-play {
      background-color: red;
    }
  }
}
/deep/ .van-popup {
  i.van-popup__close-icon {
    position: fixed !important;
    top: 870px;
    z-index: 999;
  }
  .van-cell {
    position: fixed;
    width: 100%;
    height: 94px;
    top: 850px;
    left: 0;
  }
  .songInfo {
    height: 400px;
    overflow-y: auto;
  }
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px 0 20px;
    height: 92px;
    border-bottom: 2px solid #eee;
    .left {
      width: 90%;
    }
    .left span:nth-child(1) {
      font-size: 28px;
      // color: #000;
    }
    span:nth-child(2) {
      font-size: 24px;
      // color: #737171;
    }
    .van-icon {
      font-size: 20px;
    }
  }
  .on {
    color: red !important;
  }
}
</style>
